<template>
    <div class="box" style="position: relative;height: 820px;">
        <span v-if="orders.length >0" style="position: absolute; top: 55px; left: 600px"><h1 >我的订单</h1></span>
        <!--<van-card  v-for="(good,index) in goods" :key="index"
                   :num="good.count"
                   :price="good.price"
                   :desc="good.desc"
                   :title="good.title"
                   :thumb="good.thumb"
        >
            <template #tags>
                <van-tag plain type="danger">标签</van-tag>
            </template>
            <template #tags>
                <van-tag plain type="danger">标签</van-tag>
            </template>
            <template #footer>
                <van-button round hairline style="width: 80px" type="small" @click="deleteOrder(good.num)">删除订单</van-button>
            </template>
        </van-card>-->

      <div style="position: absolute; top: 160px;">
        <div v-for="(order,index) in orders" :key="index">

            <div class="content">
              <div class="left">
                <img :src="order.logoSrc" style="width:150px;height: 80px; padding: 0 10px" alt="" @click="toOrderInfo(order)"/>
                <div class="name" style="padding: 0 80px; width: 190px">{{order.shopName}}</div>

              </div>
              <div class="right">
                <div class="time" style="padding: 0 138px; width: 200px">{{order.createTime}}</div>
                <span style="font-size: 15px;color: crimson; padding: 0 90px" @click="toOrderInfo(order)">￥{{order.totalPrice}}</span>
                <button style="width: 80px; background-color: #009be2; border-radius: 5px; border: none" @click="deleteOrder(order.oid)">删除订单</button>
              </div>
            </div>
        </div>
        <!-- <div style="height: 50px; background-color: #fab865; width: 100%">
          <div style="text-align: center;line-height: 50px;font-size: 20px">校园点餐系统</div>
        </div> -->
      </div>
<!--        <van-card  v-for="(order,index) in orders" :key="index" centered  style="background-color: white">-->
<!--            <template #title>-->
<!--                <div style="width: 200px" @click="toOrderInfo(order)" >-->
<!--                    <h3 class="line-limit-length" style="margin: 5px;width: 90px;display: inline-block;text-align: left;">{{order.shopName}}</h3>-->
<!--                    <span style="margin: 5px;float: right;width: 75px" v-if="order.orderStat===1">-->
<!--                            等待商家接单-->
<!--                    </span>-->
<!--                    <span style="margin: 5px;float: right" v-if="order.orderStat===2">-->
<!--                            等待骑手接单-->
<!--                    </span>-->
<!--                    <span style="margin: 5px;float: right" v-if="order.orderStat===3">-->
<!--                            等待送达-->
<!--                    </span>-->
<!--                    <span style="margin: 5px;float: right" v-if="order.orderStat===4">-->
<!--                            已送达-->
<!--                    </span>-->

<!--                </div>-->
<!--            </template>-->
<!--            <template #num>-->
<!--                <span style="font-size: 15px;color: crimson" @click="toOrderInfo(order)">￥{{order.totalPrice}}</span>-->
<!--            </template>-->
<!--            <template #thumb>-->
<!--                <img :src="order.logoSrc" style="width: 90px;height: 80px" alt="" @click="toOrderInfo(order)"/>-->
<!--            </template>-->
<!--            <template #desc>-->
<!--                <div style="text-align: left;font-size: 15px;margin-left: 10px" @click="toOrderInfo(order)">-->
<!--                    <span>{{order.createTime}}</span>-->
<!--                </div>-->

<!--            </template>-->
<!--            &lt;!&ndash;<template #tags>-->
<!--                <van-tag plain type="danger">标签</van-tag>-->
<!--                <van-tag plain type="danger">标签</van-tag>-->
<!--            </template>&ndash;&gt;-->
<!--            <template #footer>-->
<!--                <van-button round hairline style="width: 80px" type="small" @click="deleteOrder(order.oid)">删除订单</van-button>-->
<!--            </template>-->
<!--        </van-card>-->
        <div v-if="orders.length === 0">
            <van-empty description="您还没有订单噢~~现在去下单吧！！" style="margin-top: 150px" />
        </div>
        <!--填充-->
        <div style="height:50px;display:block;"></div>

    </div>
</template>

<script>
    import Toast from "vant/lib/toast";

    export default {
        name: "Order",
        inject:["reload"],
        created(){
            const uid = JSON.stringify(this.$store.getters.getUser.id);
            console.log(uid);
            this.axios.get("http://localhost:8084/findAllOrderByUid",{
                params:{
                    uid:uid
                }
            }).then(resp=>{
                console.log(resp.data);
                this.orders  = resp.data;
            })
        },
        data(){
            return{
                uid:'',
                orders:[
                    {
                        /*
                        goods: null,
                        totalPrice:null,
                        orderNumber:null,
                        addressMessage:null,
                        orderStat:null,
                        deliveryPrice:null,
                      */
                        /*oid:'',
                        sid:'',
                        logoSrc:'/pic/kfcLogo.png',
                        shopName:'华莱士·全鸡汉堡',
                        orderStat:1,
                        totalPrice:'50',
                        createTime:'2021.8.9',
                        goods:'',
                        orderNumber:'',
                        deliveryPrice:''*/
                    },
                    /*{
                        num: 2,
                        price:"2.00",
                        desc:"描述信息",
                        title:"商品标题",
                        thumb:"https://img01.yzcdn.cn/vant/ipad.jpeg"
                    },
                    {
                        num: 3,
                        price:"2.00",
                        desc:"描述信息",
                        title:"商品标题",
                        thumb:"https://img01.yzcdn.cn/vant/ipad.jpeg"
                    },
                    {
                        num: 4,
                        price:"2.00",
                        desc:"描述信息",
                        title:"商品标题",
                        thumb:"https://img01.yzcdn.cn/vant/ipad.jpeg"
                    },
                    {
                        num: 5,
                        price:"2.00",
                        desc:"描述信息",
                        title:"商品标题",
                        thumb:"https://img01.yzcdn.cn/vant/ipad.jpeg"
                    }*/
                ],
            }
        },
        methods:{
            deleteOrder(id){
              this.axios.get("http://localhost:8084/deleteOrderById",{
                params:{
                  oid:id
                }
              }).then(()=>{
                Toast("删除成功")
                const uid = JSON.stringify(this.$store.getters.getUser.id);
                console.log(uid);
                this.axios.get("http://localhost:8084/findAllOrderByUid",{
                  params:{
                    uid:uid
                  }
                }).then(resp=>{
                  console.log(resp.data);
                  this.orders  = resp.data;
                })
              })
            },



            toOrderInfo(order){
                console.log(order);
                this.$router.push({
                    name:"orderInfo_user",
                    params:{
                        orderInfo: order
                    }
                })

               /* orderInfo: {
                    goodTotalPrice:null,
                        deliveryPrice:null,
                        totalPrice:null,
                        orderNumber:null,
                        goods:null,
                        addressMessage: null,
                        orderStat:null,
                        createTime:null,
                        /!*deliveryManId*!/
                        dMId:null
                }*/
            }
        }
    }
</script>

<style scoped>
.content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border: 1px solid #009be2;
  background-color: #fced6e;
  /*padding: 0 60px;*/
  /*height: 140px;*/
  padding: 10px 30px;
  margin-bottom: 20px;
}
.left {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  /*position: relative;*/
}
/*.time {*/
/*  position: absolute;*/
/*  left:200px;*/
/*  top: 20px;*/
/*}*/
.right {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
    .line-limit-length {

        overflow: hidden;

        text-overflow: ellipsis;

        white-space: nowrap;

    }
</style>
